/*商品详情路由组件*/
import React, {Component} from 'react'
import {Card,List,Icon} from 'antd'
import LinkButton from '../../components/link-button'
import './detail.less'
import {reqGetCategory} from "../../api";
import {BASE_IMG_URL} from '../../util/constants'
const {Item} = List

export default class ProductDetail extends Component {

  state = {
    pCategory: '',
    subCategory: ''
  }

  getCategoryNames = async ()=>{
    const {pCategoryId,categoryId} = this.props.location.state.product
    if(pCategoryId==='0'){
      const result = await reqGetCategory(categoryId)
      const pCategory = result.data.name
      this.setState({
        pCategory
      })
    }else{
      const results = await Promise.all(
        [reqGetCategory(pCategoryId),reqGetCategory(categoryId)]
      )
      const pCategory = results[0].data.name
      const subCategory = results[1].data.name
      this.setState({
        pCategory,
        subCategory
      })
    }
  }

  componentDidMount() {
    this.getCategoryNames()
  }

  render() {
    const {name,desc,price,imgs,detail} = this.props.location.state.product
    const {pCategory,subCategory} = this.state
    const title = (
      <span>
        <LinkButton onClick={()=>this.props.history.goBack()}>
          <Icon type='arrow-left'/> &nbsp;
          Product Details
        </LinkButton>
      </span>
    )
    return (
      <Card title={title} className='detail'>
        <List>
          <Item>
            <span className='left'>Product Name: </span>
            <span>{name}</span>
          </Item>
          <Item>
            <span className='left'>Description: </span>
            <span>{desc}</span>
          </Item>
          <Item>
            <span className='left'>Price: </span>
            <span>{price}</span>
          </Item>
          <Item>
            <span className='left'>Category：</span>
            <span>{pCategory}-->{subCategory} </span>
          </Item>
          <Item>
            <span className='left'>Images: </span>
            <span>
              {
                imgs.map(img => <img key={img} src={BASE_IMG_URL+img} style={{width:100,height:100}}/>)
              }
            </span>
          </Item>
          <Item>
            <span className='left'>More Details: </span>
            <div dangerouslySetInnerHTML={{__html: detail}} />
          </Item>
        </List>
      </Card>
    )
  }
}